<template>
    <div style="position: relative;display: flex;flex-direction: column;padding: 20px;">
        <el-button style="position: absolute; right: 40px; top: 0" @click="$router.push('/addEmployee')">
            <span>新增员工</span>
        </el-button>
        <div style="margin: 10px;display: flex;align-items: center;">
            <div>
                员工列表
            </div>
            <div style="display: flex;justify-content: space-between;margin: 10px 35px 0;">
                <div>
                    <el-input v-model="inputname" placeholder="请输入内容" style="width: 200px;" />
                    <el-button type="primary" style="margin-left: 10px;" @click="getList">搜索</el-button>
                </div>
            </div>
        </div>
        <div>
            <el-table v-model:data="tableData" style="width: 100%">
                <el-table-column prop="id" label="id" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="username" label="username" width="180" />
                <el-table-column prop="phone" label="phone" />
                <el-table-column prop="sex" label="sex" />
                <el-table-column prop="status" label="status" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="editEmployee(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteEmployee">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="display: flex;justify-content: center;margin-top: 20px;">
            <el-pagination v-model:current-page="currentPage" @current-change="handleCurrentChange"
                :page-size="pageSize" layout="prev, pager, next" :total="total" />
        </div>

        <el-dialog v-model="editVisible">
            <template #header="{ close, titleId, titleClass }" >
                <div>
                    <span>编辑员工</span>
                </div>
            </template>
            <el-form>
                <el-form-item label=" 姓名">
                <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.sex" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="form.status" />
                </el-form-item>
                </el-form>
                <el-button @click="submmit">提交</el-button>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'

import { onMounted } from 'vue'

import api from '@/api'

const currentPage = ref(1)
const pageSize = ref(10)
let total = ref(50)
let tableData = ref([])

let inputname = ref('');

let editVisible = ref(false)

let form = ref({
    name: '',
    username: '',
    phone: '',
    sex: '',
    status: ''
})
const editEmployee = (row) => {
    form.value = {
        ...row
    }
    editVisible.value = true
}

const deleteEmployee = () => {

}

const handleCurrentChange = (val) => {
    getList();
}

const getList = async () => {
    const res = await api.getEmployeeList({
        name: inputname.value,
        page: currentPage.value,
        pageSize:pageSize.value    
    });
    tableData.value = res.data.data.records;
    total.value = res.data.data.total;
}

const submmit = async () => {
    const res = await api.updateEmployee({
        id: form.value.id,
        name: form.value.name,
        username: form.value.username,
        phone: form.value.phone,
        sex: form.value.sex,
        status: form.value.status
    })
    console.log(res);
    getList();
    editVisible.value = false;
}

// const search = () => {
//     getList();
// }

onMounted(() => {
    getList();
})
</script>